<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="图标" name="first">
      <div
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <div
          class="items"
          v-for="(item, index) in leftImgData"
          :key="index"
          @click="handleImgClick(item)"
        >
          <img :src="item.url" alt="" />
          <div class="text">{{ item.txt }}</div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="一键回显" name="four">
      <el-button type="primary" @click="handleSendJson">回显数据</el-button>
      <el-button type="primary" @click="handleSendTable">插入表格</el-button>
    </el-tab-pane>
    <el-tab-pane label="文本" name="second">
      <div style="display: flex; flex-wrap: wrap">
        <span
          class="txt-item"
          v-for="(item, index) in txtConList"
          :key="index"
          @click="handleTxtClick(item)"
        >
          {{ item }}
        </span>
      </div>
    </el-tab-pane>
    <el-tab-pane label="几何图形" name="three">
      <div style="display: flex; flex-wrap: wrap">
        <span
          class="txt-item"
          v-for="(item, index) in howMuchList"
          :key="index"
          @click="handlehowMuchClick(item)"
        >
          {{ item }}
        </span>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { leftImgData, txtConList, howMuchList } from "./boxleftdata";
export default {
  data() {
    return {
      leftImgData,
      txtConList,
      howMuchList,
      activeName: "first",
    };
  },
  methods: {
    // 生成表格
    handleSendTable() {
      this.$emit("handleTableChnage");
    },
    // 点击生成
    handleSendJson() {
      this.$emit("handleJsonChange");
    },
    // 点击当前的集合图形
    handlehowMuchClick(val) {
      this.$emit("howMuchChange", val);
    },
    // 点击当前图片
    handleImgClick(val) {
      // 传递给父组件
      this.$emit("imgChange", val);
    },
    // 点击文本
    handleTxtClick(val) {
      this.$emit("txtChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/box-left.scss";
</style>
